<template>
  <a-card title="网站设置">
    <a-form :form="form">
      <a-row :gutter="20">
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
          <a-form-item label="系统名称" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input placeholder="请输入系统名称" :max="3" v-decorator="[
              'name',
              { rules: [{ required: true, message: '请输入系统名称' }] }
            ]" />
          </a-form-item>

          <a-form-item label="滚动广告" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-textarea v-decorator="['statisticalCode', { rules: [{ required: true, message: '请输入系统名称' }] }]" placeholder="请输入滚动广告" :rows="4" />
          </a-form-item>

          <a-form-item label="关键字" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-textarea v-decorator="['keyword']" placeholder="请输入简介" :rows="4" />
          </a-form-item>

          <a-form-item label="系统描述" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-textarea v-decorator="['description']" placeholder="请输入系统描述" :rows="4" />
          </a-form-item>

          <a-form-item label="版权信息" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input placeholder="请输入版权信息" v-decorator="['copyright']" />
          </a-form-item>

          <a-form-item label="备案号" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input placeholder="请输入备案号" v-decorator="['internetContentProvider']" />
          </a-form-item>

          <a-form-item label="上线开始日期" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-date-picker disabled placeholder="请输入上线开始日期" v-decorator="['startOnline']" style="width: 100%" />
          </a-form-item>
          <a-row>
            <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
              <a-form-item label="自动分配" :label-col="{
                md: { span: 12 },
                xs: { span: 24 },
                sm: { span: 12 },
              }" :wrapper-col="{
                md: { span: 4 },
                xs: { span: 24 },
                sm: { span: 12 },
              }">
                <a-switch v-decorator="[
                  'isAutoAssigned',
                  { valuePropName: 'checked', initialValue: true },
                ]" un-checked-children="否" checked-children="是" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
              <a-form-item label="消息通知" :label-col="{
                md: { span: 12 },
                xs: { span: 24 },
                sm: { span: 12 },
              }" :wrapper-col="{
                md: { span: 4 },
                xs: { span: 24 },
                sm: { span: 12 },
              }">
                <a-switch v-decorator="[
                  'isOpenMsg',
                  { valuePropName: 'checked', initialValue: true },
                ]" un-checked-children="否" checked-children="是" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
              <a-form-item label="邮件通知" :label-col="{
                md: { span: 12 },
                xs: { span: 24 },
                sm: { span: 12 },
              }" :wrapper-col="{
                md: { span: 4 },
                xs: { span: 24 },
                sm: { span: 12 },
              }">
                <a-switch v-decorator="[
                  'isOpenMail',
                  { valuePropName: 'checked', initialValue: true },
                ]" un-checked-children="否" checked-children="是" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>

        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" :xxl="12">
          <a-form-item label="Logo" :label-col="labelCol" :wrapper-col="wrapperCol">
            <img-upload :fileList="fileList" @uploadCallBack="imgUploadCallBack" />
          </a-form-item>
          <a-form-item label="公司名称" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input placeholder="请输入公司名称" v-decorator="['companyName']" />
          </a-form-item>

          <a-form-item label="公司地址" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input placeholder="请输入公司地址" v-decorator="['companyAddress']" />
          </a-form-item>

          <a-form-item label="联系人" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input placeholder="请输入联系人" v-decorator="['linkName']" />
          </a-form-item>

          <a-form-item label="联系电话" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input placeholder="请输入联系电话" v-decorator="['linkPhone']" />
          </a-form-item>

          <a-form-item label="联系邮箱" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input placeholder="请输入联系邮箱" v-decorator="['linkMail']" />
          </a-form-item>

          <a-form-item label="联系微信" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input placeholder="请输入联系微信" v-decorator="['linkWx']" />
          </a-form-item>

          <a-form-item label="联系QQ" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input placeholder="请输入联系QQ" v-decorator="['linkQq']" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <footer-tool-bar>
      <a-button type="primary" v-action:website_edit @click="handleSubmit" block>保存</a-button>
    </footer-tool-bar>
  </a-card>
</template>

<script>
import moment from "moment";
import imgUpload from "_c/imgUpload";
import footerToolBar from "@/components/footerToolbar";
import { getSetting, updateSetting } from "./setting";
export default {
  components: {
    imgUpload,
    footerToolBar,
  },
  data() {
    return {
      // 显示描述宽度
      labelCol: { md: { span: 5 }, xs: { span: 24 }, sm: { span: 12 } },
      // 输入框宽度
      wrapperCol: { md: { span: 16 }, xs: { span: 24 }, sm: { span: 12 } },
      nationalitys: [],
      academicDegrees: [],
      educations: [],
      form: this.$form.createForm(this),
      entity: {
        name: '',
        statisticalCode: '',
        keyword: '',
        description: '',
        copyright: '',
        internetContentProvider: '',
        isAutoAssigned: true,
        isOpenMsg: true,
        isOpenMail: true,
      },
      // 图片上传
      fileList: [],
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    // 图片回调
    imgUploadCallBack(imgList) {
      this.fileList = imgList;
    },
    //#region 加载数据
    loadData() {
      this.form.resetFields(); // 重置参数值
      //修改，详情获取详细信息
      let that = this;
      getSetting().then((res) => {
        if (res.data) {
          that.entity = res.data;
          var setData = {};
          Object.keys(that.form.getFieldsValue()).forEach((item) => {
            setData[item] = that.entity[item];
          });

          if (that.entity.logo) {
            that.fileList = [
              {
                uid: "-1",
                name: "image.png",
                status: "done",
                url: that.entity.logo,
                thumbUrl: that.entity.logo,
              },
            ];
          }
          if (that.entity.startOnline) {
            that.entity.startOnline = moment(
              that.entity.startOnline,
              "yyyy-HH-mm HH:mm:ss"
            );
          }
          that.form.setFieldsValue(setData);
        }
      });
    },
    //#endregion

    //#region 保存
    // 保存
    handleSubmit() {
      let that = this;
      this.form.validateFields((errors, values) => {
        if (!errors) {
          let updateModel = Object.assign(
            that.entity,
            that.form.getFieldsValue()
          );

          updateModel.logo = that.fileList[0]?.thumbUrl;
          if (that.entity.startOnline) {
            updateModel.startOnline = moment(updateModel.startOnline).format(
              "HH:mm"
            );
          }
          updateSetting(updateModel).then((res) => {
            that.submitResult(res);
          });
        }
      });
    },
    // 保存结果
    submitResult(res) {
      if (res.code == 200) {
        this.$notification.success({ description: res.msg });
        if (!this.hasClose) {
          this.$emit("handleRefresh");
        }
      } else {
        this.$notification.error({ description: res.msg });
      }
    },
    //#endregion
  },
};
</script>